<template>
	<view class="container">
		<view class="status_bar"></view>
		<view class="head_bar">
			我的
		</view>
		<view class="personInfo" v-if="info">
			<navigator url="set/index" hover-class="none" class="avatar">
				<image :src="info.user.avatar?info.user.avatar:avatar" mode=""></image>
			</navigator>
			<view class="info">
				<navigator url="set/index" hover-class="none" class="info">
					<view class="nikename">
						<view class="nikename_text">{{info.user.nickname}}<image src="../../static/icon/bianji.png" mode=""></image></view>
						<view class="student_no">{{info.user.student_no}}</view>
					</view>
					<!-- <view class="eduCode">
						{{info.user.student_no}}
					</view> -->
				</navigator>
			</view>
			<navigator url="../login/user_select" hover-class="none" class="switch_btn">
				账号切换
			</navigator>
		</view>
		<view class="content">
			<view class="item">
				<navigator url="class/my_class" hover-class="none">
					<image src="../../static/img/banji1.png" mode=""></image>
					<view class="name">
						<text>我的班级</text>
					</view>
				</navigator>
			</view>
			<view class="item">
				<navigator url="kaoqin/index" hover-class="none">
					<image src="../../static/img/kaoqin1.png" mode=""></image>
					<view class="name">
						<text>我的考勤</text>
					</view>
				</navigator>
			</view>
			<view class="item">
				<navigator url="./wallet/index" hover-class="none">
					<image src="../../static/img/qianbao1.png" mode=""></image>
					<view class="name">
						<text>我的钱包</text>
					</view>
				</navigator>
			</view>
			<view class="item">
				<navigator url="./order/my_order" hover-class="none">
					<image src="../../static/img/orderx.png" mode=""></image>
					<view class="name">
						<text>我的订单</text>
					</view>
				</navigator>
			</view>
			<view class="item">
				<navigator url="./notice/list" hover-class="none">
					<uni-badge size="small" :text="info.notice.count" absolute="rightTop" type="error">
					    <image src="../../static/img/CombinedShape@2x.png" mode=""></image>
					</uni-badge>
					<view class="name">
						<text>推送消息</text>
					</view>
				</navigator>
			</view>
			<view class="item">
				<navigator url="./feedback/list" hover-class="none">
					<image src="../../static/img/a-fankuixuanzhong@2x.png" mode=""></image>
					<view class="name">
						<text>老师反馈</text>
					</view>
				</navigator>
			</view>
		</view>
		<view class="qianbao">
			<view class="qianbaoHeader">
				<view class="title">
					<image src="../../static/img/qianbao.png" mode=""></image>
					<text>我的钱包</text>
				</view>
				<navigator url="./wallet/index" class="more" hover-class="none">
					<text>进入钱包</text>
					<image src="../../static/icon/back@2x.png" mode=""></image>
				</navigator>
			</view>
			
			<view class="qianbaoContent" v-if="info">
				<navigator class="yue" hover-class="none" url="./wallet/index">
					<view class="jine">
						¥<text>{{info.user.money}}</text>
					</view>
					<view class="mingcheng">
						账户余额
					</view>
				</navigator>
				<view class="line"></view>
				<navigator class="zhangdan" url="wallet/records" hover-class="none">
					<view class="jine" v-if="info.recent_bill.number">
						¥<text>{{info.recent_bill.number}}</text>
					</view>
					<view class="zhangdan">
						账单
					</view>
					<view class="xiaofei">
						{{info.recent_bill.dec}}
					</view>
				</navigator>
			</view>
		</view>
		<navigator url="./kaoqin/index"  hover-class="none" class="kaoqin" v-if="info.clock_info">
			<view class="kaoqinHeader">
				<view class="title">
					<image src="../../static/img/kaoqin.png" mode=""></image>
					<text>当日考勤</text>
				</view>
				<view class="more">
					<text>查看更多</text>
					<image src="../../static/icon/back@2x.png" mode=""></image>
				</view>
			</view>
			<view class="kaoqinContent">
				<view class="avatar">
					<image :src="info.clock_info.clock_in_image" mode=""></image>
				</view>
				<view class="kaoqinInfo">
					<view class="banji">
						{{info.clock_info.name}}
					</view>
					<view class="design" >
						<text>签到时间：
							<text v-if="info.clock_info.clock_in_time===0">未签到</text>
							<text v-else>{{info.clock_info.clock_in_time|formatDate}}</text>
						</text>
						<text class="qiantui">签退时间：
							<text v-if="info.clock_info.clock_out_time===0">未签退</text>
							<text v-else>{{info.clock_info.clock_out_time|formatDate}}</text></text>
					</view>
				</view>
			</view>
		</navigator>
		<view class="kaoqin" v-if="info.grade_list" style="margin-top: 40rpx;">
			<view class="kaoqinHeader">
				<view class="title">
					<image src="../../static/img/kaoqin.png" mode=""></image>
					<text>我的班级</text>
				</view>
				<navigator url="class/my_class" hover-class="none" class="more">
					<text>查看更多</text>
					<image src="../../static/icon/back@2x.png" mode=""></image>
				</navigator>
			</view>
			<view class="kaoqinContent" v-for="(item,index) in info.grade_list" :key=index v-if="index<showLength">
				<view class="avatar">
					<image :src="item.contact_image" mode=""></image>
				</view>
				<view class="kaoqinInfo">
					<view class="banji">
						{{item.shop_name}}
					</view>
					<view class="design" >
						<view class="class_time">
							<image src="../../static/icon/shijian2.png" mode=""></image>
							<text>{{item.spec_value}}</text> 
							</view>
						<view class="class_time">
							<image src="../../static/img/shijian.png" mode=""></image>
							<text>{{item.class_time}}</text>
						</view>
					</view>
				</view>
				<navigator :url="'leave/index?goods_id='+item.goods_id" hover-class="none" class="qingjia">
					请假
				</navigator>
			</view>
			<view class="control" v-if="info.grade_list.length>1" @click="control">
				{{showLength>1?'收起':'展开'}}<text :class="[{'rotateCla':showLength>1}]">>></text>
			</view>
		</view>
		<view class="toolList">
			<view  >
				<navigator url="./tool/index" class="cell" hover-class="none">
					<view class="leftContent">
						<image src="../../static/img/shezhi.png" mode="" class="icon1"></image>
						<text>设置</text>
					</view>
					<image src="../../static/img/fanhui.png" mode="" class="icon"></image>
				</navigator>
			</view>
			<button class="cell" open-type="share">
				<view class="leftContent">
					<image src="../../static/icon/tuijian.png" mode="" class="icon3"></image>
					<text>推荐明心教育</text>
				</view>
				<image src="../../static/img/fanhui.png" mode="" class="icon"></image>
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: '',
				token:"",
				avatar:require('../../static/icon/avatar.png'),
				share: {
					title: '明心教育',
					path: '/pages/index/index',
					imageUrl: 'https://mx.acktechnologies.com.cn/uploads/20210709/b6bb59a54081157543d92044b2ac7378.png',
					desc: '明心教育系统是一个o2o的教育机构管理平台，提供幼儿班、托管服务、课外辅导班服务',
					content: '明心教育系统是一个o2o的教育机构管理平台，提供幼儿班、托管服务、课外辅导班服务'
				},
				showLength:1,
			}
		},
		onShow() {
			uni.showLoading({
				title:"加载中...",
				mask:true
			})
			uni.getStorage({
				key: 'user_info',
				success: (res) => {
					this.token = res.data.token;
					this.getData()
				},
				fail: (res) => {
					this.init();
				}
			});
		},
		onShareAppMessage(res) {
			return {
				title: this.share.title,
				path: this.share.path,
				imageUrl: this.share.imageUrl,
				desc: this.share.desc,
				content: this.share.content,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		onShareTimeline() {
			return {
				title: this.share.title,
				path: this.share.path,
				imageUrl: this.share.imageUrl,
				desc: this.share.desc,
				content: this.share.content,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		methods: {
			control(){
				if(this.showLength===1){
					this.showLength = this.info.grade_list.length;
				}else{
					this.showLength = 1;
				}
			},
			init() {
				uni.getStorage({
					key: 'user_info',
					success: (res) => {
						this.token = res.data.token;
						if (this.token) {
							uni.getLocation({
								type: 'wgs84',
								success: (res) => {
									let longitude = res.longitude;
									let latitude = res.latitude;
									uni.request({
										url: 'https://mx.acktechnologies.com.cn/api/wxapp/apply/uploadLocation',
										data: {
											"token": this.token,
											"longitude": longitude,
											"latitude": latitude
										},
										method: 'GET',
										success: res => {
											console.log(res);
											
										},
										fail: (res) => {
											console.log(res)
											this.wxLogin();
										},
									});
								},
								fail: () => {
									this.wxLogin();
								}
							});
						} else {
							this.wxLogin();
						}
					},
					fail: () => {
						this.wxLogin();
					}
				});
			},
			wxLogin() {
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						console.log(loginRes)
						this.code = loginRes.code;
						this.$request('/api/wxapp/index/wxLogin', {
							'code': loginRes.code
						}).then(wxLoginRes => {
							if (wxLoginRes.code === 1) {
								this.isReg = wxLoginRes.data.is_reg;
								this.session_key = wxLoginRes.data.session_key;
								this.openid = wxLoginRes.data.openid;
								uni.setStorageSync('openid', this.openid);
								if (this.isReg) {
									this.auth();
								} else {
									uni.redirectTo({
										url: '../login/auth?redirect=../my/index'
									});
								}
							}
						})
					}
				});
			},
			auth() {
				let param = {
					'openid': this.openid
				}
				this.$request('/api/wxapp/index/accountLogin', param)
					.then(res => {
						let userinfo = res.data.userinfo;
						console.log(userinfo)
						uni.setStorage({
							key: 'user_info',
							data: userinfo,
							success: () => {
								this.token = userinfo.token;
								this.getData();
							}
						});
						if (res.data.usernum > 1) {
							uni.navigateTo({
								url: '../login/user_select'
							});
						}
					})
			},
			getData() {
				uni.request({
					url: `https://mx.acktechnologies.com.cn/api/wxapp/mine/index/index`,
					data: {
						"token": this.token,
					},
					method: 'GET',
					success: res => {
						console.log(res)
						uni.hideLoading();
						if (res.data.code === 1) {
							this.info = res.data.data;
						} else if (res.data.code === 403||res.data.code === 401) {
							uni.redirectTo({
								url: '../login/auth?redirect=../my/index'
							});
						} else {
							uni.showToast({
								title: '服务器开小差了呢，请您稍后再试',
								icon: 'none'
							})
						}
					},
					fail: () => { //接口请求失败的处理
						uni.showToast({
							title: '服务器开小差了呢，请您稍后再试',
							icon: 'none'
						})
					},
				});
			}
		},
		filters: {
			formatDate: function(value) {
				let date = new Date(value * 1000);
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h;
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m;
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s;
				return h + ':' + m + ':' + s;
			}
		}
	}
</script>

<style scoped lang="scss">
	.status_bar {
	      height: var(--status-bar-height);
		  line-height: var(--status-bar-height);
	      width: 100%;
		  text-align: center;
		  color: #FFFFFF;
		  font-weight: 700;
		  background-color: #50D6A7;
		  position: fixed;
		  top: 0;
		  left: 0;
		  z-index: 999;
	  }
	  .head_bar{
		  width: 100%;
		  height: 80rpx;
		  line-height: 80rpx;
		  color: #FFFFFF;
		  text-align: center;
		  font-weight: 700;
		  position: fixed;
		  top: var(--status-bar-height);
		  left: 0;
		  z-index: 999;
	  }
	.container {
		width: 100%;
		height: 100%;
		background: url(../../static/img/topbg1.png)no-repeat top left/100%;
		overflow: auto;
		padding-top: 125rpx;
		box-sizing: border-box;
	}
	.personInfo {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		margin: 40rpx 0 40rpx 40rpx;
		position: relative;
		.switch_btn{
			width: 180rpx;
			height: 64rpx;
			line-height: 64rpx;
			font-size: 26rpx;
			font-family: SourceHanSansCN-Normal, SourceHanSansCN;
			color: #FFFFFF;
			text-align: center;
			letter-spacing: 2rpx;
			box-shadow: 0px 2px 10px 0px #00815D;
			background: linear-gradient(90deg, #79F4BA 0%, #65E9C1 100%);
			border-top-left-radius: 32rpx;
			border-bottom-left-radius: 32rpx;
			position: absolute;
			right: 0;
		}
		.avatar {
			width: 48px;
			height: 48px;
			border-radius: 50%;

			image {
				width: 48px;
				height: 48px;
				border-radius: 50%;
			}
		}

		.info {
			margin-left: 20rpx;

			.nikename_text {
				font-size: 20px;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 500;
				color: #FFFFFF;
				image{
					width: 14px;
					height: 14px;
					margin-left: 11px;
				}
			}
			.student_no{
				width: 70px;
				height: 15px;
				font-size: 15px;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				color: #FFFFFF;
				line-height: 23px;
			}
			.eduCode {
				font-size: 15px;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

	}

	.content {
		width: 670rpx;
		background: #FFFFFF;
		box-shadow: 0px 2px 10px 0px #E9EBF6;
		border-radius: 8px;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		padding: 50rpx 24rpx 20rpx 24rpx;
		box-sizing: border-box;

		.item {
			width: 155.5rpx;
			text-align: center;
			margin-bottom: 30rpx;
			position: relative;
			image {
				display: block;
				width: 72rpx;
				height: 72rpx;
				margin: 0 auto;
			}

			text {
				font-size: 15px;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #666666;
				margin-top: 14rpx;
			}
		}
	}

	.qianbao {
		width: 670rpx;
		height: 260rpx;
		background: #FFFFFF;
		box-shadow: 0px 2px 10px 0px #E9EBF6;
		border-radius: 8px;
		margin: 40rpx auto;
		padding: 20rpx;
		box-sizing: border-box;
		.qianbaoHeader{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			.more{
				text{
					font-size: 13px;
					color: #999999;
				}
				image{
					width: 6px;
					height: 11px;
					margin-left: 10px;
				}
			}
		}
		.title {
			display: flex;
			flex-direction: row;
			align-items: center;

			image {
				display: block;
				width: 14px;
				height: 14px;
			}

			text {
				font-size: 15px;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #333333;
				margin-left: 5px;
			}
		}

		.qianbaoContent {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;

			.line {
				width: 1px;
				height: 43px;
				background-color: #EFEFEF;
			}

			.yue,
			.zhangdan {
				width: 314rpx;
				text-align: center;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
			}

			.jine {
				font-size: 22px;
				font-weight: 500;
				color: #333333;
			}

			.mingcheng {
				font-size: 17px;
				color: #666666;
				margin-top: 10rpx;
			}

			.zhangdan {
				font-size: 15px;
				color: #333333;
			}

			.xiaofei {
				font-size: 13px;
				color: #999999;
				margin-top: 10rpx;
			}
		}
	}

	.kaoqin {
		width: 670rpx;
		// height: 240rpx;
		background: #FFFFFF;
		box-shadow: 0px 2px 10px 0px #E9EBF6;
		border-radius: 8px;
		padding: 20rpx;
		box-sizing: border-box;
		margin: 0 auto;
		.kaoqinHeader{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			.more{
				text{
					font-size: 13px;
					color: #999999;
				}
				image{
					width: 6px;
					height: 11px;
					margin-left: 10px;
				}
			}
		}
		.title {
			display: flex;
			flex-direction: row;
			align-items: center;

			image {
				display: block;
				width: 14px;
				height: 16px;
			}

			text {
				font-size: 15px;
				color: #333333;
				margin-left: 5px;
			}
		}
	}

	.kaoqinContent {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		margin-top: 32rpx;
		position: relative;
		.avatar {
			max-width: 112rpx;
			max-height: 112rpx;
			margin-right: 8px;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			image {
				display: block;
				width: 112rpx;
				height: 112rpx;
				border-radius: 50%;
			}
		}

		.kaoqinInfo {
			.banji {
				font-size: 15px;
				color: #333333;
			}

			.design {
				font-size: 13px;
				color: #999999;
				margin-top: 15rpx;
				.class_time{
					font-size: 13px;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					color: #999999;
					display: flex;
					align-items: center;
					image{
						display: block;
						width: 13px;
						height: 13px;
						margin-right: 4px;
					}
				}
			}
			.class_time{
				margin-bottom: 20rpx;
			}
			.qiantui {
				margin-left: 20rpx;
			}
		}
		.qingjia{
			width: 122rpx;
			height: 48rpx;
			line-height: 48rpx;
			background: linear-gradient(90deg, #9BDFB5 0%, #84DFD1 100%);
			border-radius: 24rpx;
			font-size: 28rpx;
			font-family: SourceHanSansCN-Normal, SourceHanSansCN;
			color: #FFFFFF;
			text-align: center;
			box-shadow: 0rpx 0rpx 30rpx 5rpx #9BDFB5;
			position: absolute;
			right: 6rpx;
		}
	}
	.control{
		text-align: center;
		font-size: 13px;
		font-family: SourceHanSansCN-Normal, SourceHanSansCN;
		color: #999999;
		margin-top: 14rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		text{
			display: block;
		}
		.rotateCla{
			animation: rotate .8s linear infinite;
		}
	}
	.toolList {
		margin-top: 38rpx;
	}

	.cell {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0 48rpx;
		height: 80rpx;
		background-color: #FFFFFF;
		.leftContent {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;

			.icon1 {
				width: 32rpx;
				height: 32rpx;
			}

			.icon2 {
				width: 32rpx;
				height: 36rpx;
			}
			.icon3{
				width: 34rpx;
				height: 32rpx;
			}
			text {
				font-size: 15px;
				color: #333333;
				margin-left: 24rpx;
			}
		}

		.icon {
			width: 6px;
			height: 12px;
		}
	}
	button::after {
		border: none;
	}
	@keyframes rotate {
	    0% {
	    transform: translateY(0) rotate(-90deg);
	  }
	    25% {
	        transform: translateY(5rpx) rotate(-90deg);
	    }
	    50% {
	        transform: translateY(-5rpx) scale(1.2, 0.8) rotate(-90deg);
	    }
	    75% {
	        ransform: translateY(5rpx) rotate(-90deg);
	    }
	    100% {
	        transform: translateY(0) rotate(-90deg);
	    }
	}
</style>
